<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>可切换方向的无缝衔接图片滚动效果</title>
</head>
<style>
    * {
        /* 初始化 */
        margin: 0;
        padding: 0;
    }

    body {
        /* 100%窗口高度 */
        height: 100vh;
        /* 弹性布局 居中显示 */
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #1b1b1b;
    }

    .container {
        width: 800px;
        /* 相对定位 */
        position: relative;
        /* 溢出隐藏 */
        overflow: hidden;
    }

    ul {
        width: 800px;
        height: 150px;
        overflow: hidden;
        display: flex;
        position: relative;
    }

    li {
        list-style: none;
        height: 100%;
        padding-right: 20px;
    }

    li img {
        width: 200px;
        height: 150px;
        /* 保持原有尺寸比例，裁切长边 */
        object-fit: cover;
        /* 图片定位正中间 */
        object-position: center;
    }

    .btns {
        display: flex;
        justify-content: center;
        padding-top: 50px;
    }

    .btn {
        color: #fff;
        border: 1px solid #ddd;
        padding: 5px 15px;
        margin: 0 15px;
        border-radius: 3px;
        font-size: 14px;
        cursor: pointer;
    }

    .btn:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }
</style>

<body>
    <div class="container">
        <ul>
            <li><img src="img/op1/1.jpg" alt=""></li>
            <li><img src="img/op1/2.jpg" alt=""></li>
            <li><img src="img/op1/3.jpg" alt=""></li>
            <li><img src="img/op1/4.jpg" alt=""></li>
        </ul>
        <div class="btns">
            <div class="btn">← 向左走</div>
            <div class="btn">向右走 →</div>
        </div>
    </div>
</body>
<script>
    // 获取ul元素，并为其追加一组相同图片（为了做到无缝衔接）
    let ul = document.querySelector('ul');
    console.log(ul)
    ul.innerHTML = ul.innerHTML + ul.innerHTML;
    console.log(ul)
    // 获取所有的li元素和.btn元素
    let lis = document.querySelectorAll('li');
    let btns = document.querySelectorAll('.btn');
    // 每次滚动的跨度（正数向右，负数向左，默认向左滚动）
    let spa = -2;
    // 计算并设置ul的总宽度
    ul.style.width = lis[0].offsetWidth * lis.length + 'px';
    console.log(ul.offsetLeft, ul.style.left, lis[0].offsetWidth, lis.length)
    // 滚动函数
    function move() {
        if (ul.offsetLeft < -ul.offsetWidth / 2) {
            // 向左走时，判断图片是否走完（这里本来时4张图片，加上后面追加的4张相同的，共有8张，所以需要用ul的总宽度来除以2进行判断），走完时重新开始
            ul.style.left = '0';
        }
        if (ul.offsetLeft > 0) {
            // 向右走时，判断图片是否走完
            ul.style.left = -ul.offsetWidth / 2 + 'px';
        }
        // 设置偏移位置
        ul.style.left = ul.offsetLeft + spa + 'px';
    }

    // 定时器，每30毫秒执行一次move函数
    // let timer = setInterval(move, 30);

    // 为ul绑定事件，悬停停止，移开滚动
    ul.addEventListener('mousemove', function () {
        clearInterval(timer);
    })
    ul.addEventListener('mouseout', function () {
        timer = setInterval(move, 30);
    })

    // 为两个按钮绑定点击事件
    // 向左走
    btns[0].addEventListener('click', function () {
        spa = -2;
    })
    // 向右走
    btns[1].addEventListener('click', function () {
        spa = 2;
    })
</script>

</html>